<template>
  <uni-table border stripe class="optimized-table">
    <!-- 动态数据行，每组数据拆分为 label 和 value 两个单元格 -->
    <uni-tr v-for="(row, rowIndex) in groupedData" :key="rowIndex">
      <template v-for="(item, itemIndex) in row">
        <uni-td 
          :key="`label-${itemIndex}`"
          class="label-cell"
        >
          {{ item.label }}
        </uni-td>
        <uni-td 
          :key="`value-${itemIndex}`"
          class="value-cell"
        >
          {{ item.value }}
        </uni-td>
      </template>
    </uni-tr>
  </uni-table>
</template>

<script>
export default {
  name: 'BusinessTableNoTitle',
  props: {
    data: {
      type: Array,
      required: true
    },
    itemsPerRow: {
      type: Number,
      default: 1
    }
  },
  computed: {
    groupedData() {
      const groups = []
      for (let i = 0; i < this.data.length; i += this.itemsPerRow) {
        groups.push(this.data.slice(i, i + this.itemsPerRow))
      }
      return groups
    }
  }
}
</script>

<style scoped>
/* 表格布局优化 */
.optimized-table ::v-deep .uni-table-tr {
  display: flex;
  flex-wrap: nowrap;
}

/* 单元格基础样式 */
.optimized-table ::v-deep .uni-table-td {
  flex: 1;
  min-width: 120px;
  padding: 12px;
  border-right: 1px solid #ebeef5;
}

/* 标签单元格特殊样式 */
.label-cell {
  background: #f5f7fa;
  font-weight: 600;
  color: #303133;
  border-right: 2px solid #e4e7ed !important; /* 加强分隔线 */
}

/* 数值单元格特殊样式 */
.value-cell {
  color: #409eff;
  font-weight: bold;
  font-size: 16px;
}

/* 最后一列右边框移除 */
.optimized-table ::v-deep .uni-table-td:last-child {
  border-right: none;
}

/* 保持原有表格整体样式 */
.optimized-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}
</style>